<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%> 
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search Result@ArnetMiner</title>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<link type="text/css" href="css/arnetminer.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		$(".follow").click(function() {
			var follow = $(this);
			var unfollow = $(this).parent().find(".unfollow");
			$.ajax({
				url : "follow.do?id=" + $(this).attr("followee") + "&type=1",
				dataType : 'json',
				success : function(data) {
					var msg = data['error'];
					if (msg == "") {
						follow.addClass("hidden");
						unfollow.removeClass("hidden");
						return;
					}
					else {
						alert(msg);
					}
				},
				error : function(xhr, testStatus, error) {
					alert("Communication error!");
					return;
				}
			});
		});
		
		$(".unfollow").click(function() {
			var unfollow = $(this);
			var follow = $(this).parent().find(".follow");
			$.ajax({
				url : "unfollow.do?id=" + $(this).attr("followee") + "&type=1",
				dataType : 'json',
				success : function(data) {
					var msg = data['error'];
					if (msg == "") {
						unfollow.addClass("hidden");
						follow.removeClass("hidden");
						return;
					}
					else {
						alert(msg);
					}
				},
				error : function(xhr, testStatus, error) {
					alert("Communication error!");
					return;
				}
			});
		});
		
		$("a>button").click(function(){
			window.location = $(this).parent().attr("href");
		});
		
		$("#status").focus(function() {
			$(this).animate({
				height: '40px'
			}, 1000);
			if ($(this).hasClass("defaulttext")) {
				$(this).val("");
				$(this).removeClass("defaulttext");
			}
		}).blur(function() {
			$(this).animate({
				height: '20px'
			}, 1000);
			if ($(this).val() == "") {
				$(this).addClass("defaulttext");
				$(this).val("Post your status here...");
				$("#statwords").html("0/300");
			}
		}).keyup(function() {
			if($(this).val().length > 300)
				$(this).val($(this).val().substring(0, 300));
			else {
				$("#statwords").html($(this).val().length + "/300");
			}
		});
		
		$("#statshare").click(function() {
			if ($("#status").val() == "") {
				alert("Post cannot be empty!");
				return;
			}
			
			
			$.ajax({
				url : "postStatus.do?status=" + $("#status").val(),
				dataType : 'json',
				success : function(data) {
					var msg = data['error'];
					if (msg == "") {
						$("#status").val("Status saved...").addClass("defaulttext");
						return;
					}
					else {
						alert(msg);
					}
				},
				error : function(xhr, testStatus, error) {
					alert("Communication error!");
					return;
				}
			});
		});
		
		$(".reply").focus(function() {
			$(this).val("");
			$(this).animate({
				height: '40px'
			}, 1000);
			$(this).parent().find(".replybutton").show();
		}).blur(function() {
			$(this).animate({
				height: '20px'
			}, 1000);
			$(this).parent().find(".replybutton").hide();
			$(this).val("Post your reply here...");
		});
		
		$(".keyword").focus(function() {
			if ($(this).hasClass("defaulttext")) {
				$(this).val("")
			}
			$(this).addClass("ieFocusHack").removeClass("defaulttext");
		}).blur(function() {
			if ($(this).val() == "") {
				$(this).val("Search experts, conferences, publications, users here...").addClass("defaulttext");
			}
			$(this).removeClass("ieFocusHack");
		});
		
		$("#updatelist li").mouseover(function() {
			$(this).find(".updatemanage").show();
		}).mouseout(function() {
			$(this).find(".updatemanage").hide();
		});
		
		$("#searchpanel").tabs({ selected: 2 });
	});
</script>
</head>

<body>
<div id="container">
	<div id="header">
    	<div id="banner">
            <h1>
                ArnetMiner
            </h1>
        </div>
        <ul id="menu">
            <li><a href="#">Message</a></li>
            <li><html:link action="/follower.do">Follower</html:link></li>
            <li><html:link action="/following.do">Following</html:link></li>
            <li><html:link action="/profile.do">Profile</html:link></li>
            <li><html:link action="/index.do">Home</html:link></li>
        </ul>
    </div>
    <div class="main">
    	<div id="panel">
        	<div id="profile" class="ui-widget-content">
                <a href="profile.do?id=${account.id}"><img class="thumb" src="${account.thumb}"/></a>
            	<p id="bio">
                	${account.firstName} ${account.lastName}<br/>
                	<!-- 
                    H-index: 0<br/>
                    Papers: 0<br/>
                    Citation: 0<br/>
                    -->
                    ${account.organization.orgName}<br/>
                    <html:link action="/editProfile.do">Edit My Profile</html:link><br/><br/>
                    <html:link action="/logout.do">
                    <button class="ui-button-text-only ui-widget ui-state-default button">
						<span class="ui-button-text">Logout</span>
					</button>
					</html:link>
                </p>
                <span id="statpanel">
                	<p id="statitem">
                    	<img src="images/post.jpg" class="staticon" align="absbottom"/> <a href="#">Post</a> <img src="images/publication.jpg" class="staticon" align="absbottom"/> <a href="#">Publication</a> <img src="images/link.jpg" class="staticon" align="absbottom"/> <a href="#">Link</a>
                    </p>
               		<textarea id="status" class="defaulttext">Post your status here...</textarea>
                    <p id="statwords">0/300</p>
                    <button id="statshare" class="ui-button-text-only ui-widget ui-state-default button">
						<span class="ui-button-text">Share</span>
					</button>
                </span>
            </div>
        </div>
        <div class="content">
        	<div id="searchpanel">
                <ul>
                    <li><a href="#experttab">Expert Search</a></li>
                    <li><a href="#pubtab">Publication Search</a></li>
                    <li><a href="#conftab">Conference Search</a></li>
                    <li><a href="#usertab">User Search</a></li>
                </ul>
                <div id="experttab">
                	<html:form action="/searchExpert.do" method="get">
                	<p>
                        <html:text styleClass="defaulttext keyword" property="keyword" value="Search experts, conferences, publications, users here..."></html:text>
                    </p>
                    <p>
                        <button type="submit" class="ui-button-text-only ui-widget ui-state-default button">
                            <span class="ui-button-text">Search</span>
                        </button>
                    </p>
                    </html:form>
                </div>
                
                <div id="pubtab">
                	<html:form action="/searchPublication.do" method="get">
                	<p>
                        <html:text styleClass="defaulttext keyword" property="keyword" value="Search experts, conferences, publications, users here..."></html:text>
                    </p>
                    <p>
                        <button type="submit" class="ui-button-text-only ui-widget ui-state-default button">
                            <span class="ui-button-text">Search</span>
                        </button>
                    </p>
                    </html:form>
                </div>
                
                <div id="conftab">
                	<html:form action="/searchConference.do" method="get">
                	<p>
                        <html:text styleClass="defaulttext keyword" property="keyword" value="Search experts, conferences, publications, users here..."></html:text>
                    </p>
                    <p>
                        <button type="submit" class="ui-button-text-only ui-widget ui-state-default button">
                            <span class="ui-button-text">Search</span>
                        </button>
                    </p>
                    </html:form>               
                </div>
                
                <div id="usertab">
                	<html:form action="/searchUser.do" method="get">
                	<p>
                		<html:text styleClass="defaulttext keyword" property="keyword" value="Search experts, conferences, publications, users here..."></html:text>
                    </p>
                    <p>
                        <button type="submit" class="ui-button-text-only ui-widget ui-state-default button">
                            <span class="ui-button-text">Search</span>
                        </button>
                    </p>
                    </html:form>
                </div>
            </div>
        	<div id="body-panel">
            	 <div class="body-section">
                 	<p class="ui-accordion ui-widget ui-helper-reset ui-accordion-header ui-state-active text-header">
                        <span class="ui-icon ui-accordion-icons ui-icon-triangle-1-s header-icon"></span>
                        <a href="#">Search Result for "${keyword}"</a>
                     </p>
                     <div class="ui-accordion-content ui-helper-reset ui-widget-content body-content">
                     	<logic:present name="result">
                        <ul>
                        	<logic:iterate id="user" name="result">
                        	<li>
                            	<div class="body-thumb">
                                	<span class="body-thumb-left">
                                    	<html:link action="/profile.do" paramId="id" paramName="user" paramProperty="id"><img class="mediumthumb" src="${user.thumb}" align="absmiddle"/></html:link>
                                    </span>
                                    
                                    <span class="body-thumb-profile">
                                    	${user.firstName} ${user.lastName}<br/>
                                    	${user.organization.orgName}
                                    </span>
                                    <span class="body-thumb-right">
                                    	<logic:equal name="user" property="follow" value="true">
                                    	<button followee="${user.id}" class="ui-button-text-only ui-widget ui-state-default button follow hidden">
                                            <span class="ui-button-text">Follow</span>
                                        </button>
                                        <button followee="${user.id}" class="ui-button-text-only ui-widget ui-state-default button unfollow">
                                            <span class="ui-button-text">Unfollow</span>
                                        </button>
                                        </logic:equal>
                                        
                                        <logic:notEqual name="user" property="follow" value="true">
                                    	<button followee="${user.id}" class="ui-button-text-only ui-widget ui-state-default button follow">
                                            <span class="ui-button-text">Follow</span>
                                        </button>
                                        <button followee="${user.id}" class="ui-button-text-only ui-widget ui-state-default button unfollow hidden">
                                            <span class="ui-button-text">Unfollow</span>
                                        </button>
                                        </logic:notEqual>
                                    </span>
                                </div>
                            </li>
                            </logic:iterate>
                            <li class="pages">
								<c:forEach var="pageNum" begin="1" end="${page.totalPages}">
									<logic:equal name="page" property="currentPage" value="${pageNum}" >
										<p class="cur-page">
											${pageNum}
										</p>
									</logic:equal>
									<logic:notEqual name="page" property="currentPage" value="${pageNum}">
										<p class="page">
											<html:link action="/searchUser.do?keyword=${keyword}&next=${pageNum}">${pageNum}</html:link>
										</p>
									</logic:notEqual>
								</c:forEach>
                     		</li>
                        </ul>
                        </logic:present>
                        <logic:notPresent name="result">
                        	<p align="center">No result for "${keyword}".</p>
                        </logic:notPresent>
                     </div>
                 </div>
            </div>
        </div>
    </div>
    <div id="footer">
    	<p class="copyright">KEG&Tsinghua University | © 2010 Tsinghua University</p>
    </div>
</div>
</body>
</html>

